<template>
  <div class="post-list">
    <el-row :gutter="20">
      <!-- 使用 el-col 将每个帖子放在一个列中 -->
      <el-col :span="12" v-for="(post, index) in displayedPosts" :key="index">
        <div class="post-item" @click="goToDetail(post)">

         
          <!-- 内容区域 -->
          <div class="content">
            <div class="title-avatar">
                  <!-- 头像区域 -->
                <div class="avatar">
                  <img :src="getAvatarUrl(post.author_avatar_url)" alt="头像" />
                </div>
                <!-- 作者和时间 -->
                <div class="meta">
                  <div class="author">{{ post.author_name || '匿名用户' }}</div>
                  <div class="time">{{ formatTime(post.created_at) }}</div>
                </div>
            </div>
           
           

            <!-- 标签 -->
            <div class="tags">
              <span v-if="post.category" class="tag">{{ post.category }}</span>
            </div>

             <!-- 标题 -->
            <h3 class="title">{{ post.title }}</h3>
            <!-- 内容 -->
            <div class="meta">
              <span class="roast-content">{{ post.content }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { RoastApi } from '@/utils/api'
import { ElRow, ElCol } from 'element-plus'
import apiConfig from '@/utils/apiConfig' // 添加这一行
import defaultAvatar from '@/assets/images/defaultAvatar.png'

export default {
  name: 'Roastlist',
  components: {
    ElRow,
    ElCol
  },
  data() {
    return {
      posts: [],
      defaultAvatar: defaultAvatar
    }
  },
  computed: {
    displayedPosts() {
      return this.posts.slice(0, 4);
    }
  },
  mounted() {
    this.fetchPosts()
  },
  methods: {
    async fetchPosts() {
      try {
        const params = {
          skip: 0,
          limit: 4
        }

        const response = await RoastApi.getRoastList(params)
        if (Array.isArray(response)) {
          this.posts = response
        } else if (response.data) {
          this.posts = response.data.items || response.data
        } else {
          this.posts = response.items || response
        }
      } catch (error) {
        console.error('获取吐槽列表失败:', error)
      }
    },

    goToDetail(post) {
      this.$router.push({
        name: 'RoastDetail',
        params: { id: post.id },
        query: {
         
          flarum_url: post.flarum_url
        }
      })
    },

    formatTime(timeString) {
      if (!timeString) return '未知时间'

      const date = new Date(timeString)
      const now = new Date()
      const diff = now - date

      const minutes = Math.floor(diff / (1000 * 60))
      if (minutes < 60) {
        return `发布于 ${minutes} 分钟前`
      }

      const hours = Math.floor(diff / (1000 * 60 * 60))
      if (hours < 24) {
        return `发布于 ${hours} 小时前`
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      return `发布于 ${days} 天前`
    },

    // 新增方法：拼接完整头像 URL
    getAvatarUrl(avatarUrl) {
      if (!avatarUrl) return this.defaultAvatar
      const baseUrl = apiConfig.imageBaseURL.development
      return `${baseUrl}/${avatarUrl}`
    }
  }
}

</script>

<style scoped>
.title-avatar{
  display: flex;
  align-items: center;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #e6e6e6; /* 新增：浅灰色边框 */
   
}

.post-list {
  padding: 20px;
  background-color: #fff;
}

.post-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.post-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  flex: 1;
}

.title {
  font-size: 16px;
  color: #333;
  margin:8px 0;
  line-height: 1.4;
}

.meta {
  /* display: flex; */
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
  color: #666;
}

.roast-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.author {
  margin-right: 8px;
}

.tags {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .post-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .avatar {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>